<template>
    <div>
        <el-row>
            <el-col :span="7" style="padding-right: 20px;">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>个人信息</span>
                    </div>
                    <profile style="padding:27px 0px;"/>
                    <ul class="userInfoUl">
                        <li>
                            <svg-icon icon-class="user"/>
                            <span class="title">用户姓名</span>
                            <span class="value">{{ userInfo.nickName }}</span>
                        </li>
                        <li>
                            <svg-icon icon-class="phone"/>
                            <span class="title">手机号码</span>
                            <span class="value">{{ userInfo.phone }}</span>
                        </li>
                        <li>
                            <svg-icon icon-class="email"/>
                            <span class="title">用户邮箱</span>
                            <span class="value">{{ userInfo.email }}</span>
                        </li>
                        <li>
                            <svg-icon icon-class="department"/>
                            <span class="title">所属部门</span>
                            <span class="value">{{ userInfo.companyName }}</span>
                        </li>
                        <li>
                            <svg-icon icon-class="role"/>
                            <span class="title">拥有角色</span>
                            <span class="value">{{ roles }}</span>
                        </li>
                        <li>
                            <svg-icon icon-class="shengri"/>
                            <span class="title">出生日期</span>
                            <span class="value">{{ userInfo.birthday }}</span>
                        </li>
                        <li>
                            <svg-icon icon-class="gender"/>
                            <span class="title">用户性别</span>
                            <span class="value">{{ userInfo.gender === 1 ? '男':'女' }}</span>
                        </li>
                        <li>
                            <svg-icon icon-class="she"/>
                            <span class="title">所属生肖</span>
                            <span class="value">{{ userInfo.animals }}</span>
                        </li>
                        <li>
                            <svg-icon icon-class="xingzuo"/>
                            <span class="title">所属星座</span>
                            <span class="value">{{ userInfo.constellation }}</span>
                        </li>
                    </ul>
                </el-card>
            </el-col>

            <el-col :span="17">
                <el-card class="box-card">
                    <template>
                        <el-tabs v-model="activeName">
                            <el-tab-pane label="基础资料" name="baseInfo">
                                <user-base-info :base-user-info="baseUserInfoEntity" :rules="userBaseInfoRles"/>
                            </el-tab-pane>
                            <el-tab-pane label="修改密码" name="updatePwd">
                                <user-password-update/>
                            </el-tab-pane>
                        </el-tabs>
                    </template>
                </el-card>
            </el-col>
        </el-row>

    </div>
</template>

<script>
import profile from '@/components/common/profile.vue';
import userPasswordUpdate from './userPasswordUpdate.vue';
import userBaseInfo from './userBaseInfo.vue';
import {baseUserInfoEntity} from './entity/userEntity'
import {userBaseInfoRles} from './entity/userVerify'
import {userDetailsApi} from '@/api/system/userApi'
export default {
    components: { profile,userBaseInfo,userPasswordUpdate },
    data(){
        return {
            activeName:"baseInfo",
            baseUserInfoEntity,
            userBaseInfoRles,
            userInfo : {},
            roles:"",

        }
    },
    methods:{
        getLoginUserInfo(){
            userDetailsApi(this.$store.getters['user/GET_LOGIN_INFO'].userId).then(data=>{
                this.userInfo = data;
                this.userInfo.companyName = data.companyInfo.companyName;
                let roleNames = [];
                this.userInfo.roleList.forEach(role=>{
                    roleNames.push(role.roleName);
                })
                this.roles = roleNames.join();
                this.baseUserInfoEntity = this.$deepCopy(data);
                let card = this.baseUserInfoEntity.cardUrl.split(',');
                this.baseUserInfoEntity.cardUrl1 = card[0];
                this.baseUserInfoEntity.cardUrl2 = card[1];
            }).catch(err=>{
                this.$message.error(err);
            })
        }
    },
    mounted(){
        this.getLoginUserInfo();
    }

}
</script>

<style scoped lang="scss">
.userInfoUl {
    margin-top: 30px;
    font-size: 14px;

    li {
        padding: 8px 10px;
        border-bottom: 1px solid rgb(194, 185, 185);
        margin: 12px 0px;

        .title{
            padding: 0px 30px 0px 12px;
        }
    }
}
</style>